<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>图片预加载之有序加载</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
    }
    
    .box {
        text-align: center;
    }
    
    .btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        background: #fff;
        padding: 0 10px;
        margin-right: 50px;
        color: #333;
        text-decoration: none;
    }
    
    .btn:hover {
        background: #eee;
    }
    
    .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #eee;
        text-align: center;
        font-size: 30px;
    }
    
    .progress {
        margin-top: 300px;
    }
    </style>
</head>

<body>
    <div class="box">
        <img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="pic" id="img" width="1200" height="600">
        <p>
            <a href="javascript:;" class="btn" data-control="prev">上一页</a>
            <a href="javascript:;" class="btn" data-control="next">下一页</a>
        </p>
    </div>
   <!--  <div class="loading">
        <p class="progress">0%</p>
    </div> -->
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/perload.js"></script>
    <script type="text/javascript">
    	// var imgs=[
    	// 	'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
    	// 	'http://file.mumayi.com/forum/201305/09/104352px9yz90eu717q79l.jpg',
    	// 	'http://pic.58pic.com/58pic/17/51/71/14Y58PICPzR_1024.jpg',
    	// 	'http://img2.niutuku.com/desk/anime/3721/3721-9558.jpg',
    	// 	'http://www.33lc.com/article/UploadPic/2012-8/201281310522387763.jpg',
    	// ];
    	// var len=imgs.length,
    	// 	count=0,
    	// 	index=0;

    	// load();
    	// //有序yujiaz
    	// function load(){
    	// 	//第一步 先创建img对象
    	// 	var imgObj=new Image();
    	// 	//第二步 绑定load error事件 
    	// 	$(imgObj).on('load error',function(){
    	// 		count++;
    	// 		if(count>=len){
    	// 			//所有图片加载完毕
    	// 		}else{
    	// 			load();//自身调用
    	// 		}
    	// 	});
    	// 	//将当前图片的路径赋值给img对象的src来开始预加载
    	// 	imgObj.src=imgs[count];
    	// }


    	// $('.btn').on('click',function(){
    	// 	if('prev'===$(this).data("control")){//上一张
    	// 		index=Math.max(0,--index);
    	// 	}else{//下一张
    	// 		index=Math.min(len-1,++index);
    	// 	}
    	// 	document.title=(index+1)+'/'+len;
    	// 	$('#img').attr('src',imgs[index]);
    	// });


    	var imgs=[
    		'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
    		'http://file.mumayi.com/forum/201305/09/104352px9yz90eu717q79l.jpg',
    		'http://pic.58pic.com/58pic/17/51/71/14Y58PICPzR_1024.jpg',
    		'http://img2.niutuku.com/desk/anime/3721/3721-9558.jpg',
    		'http://www.33lc.com/article/UploadPic/2012-8/201281310522387763.jpg',
    	];
    	var len=imgs.length,
    		index=0;

    	$.preload(imgs,{
    		order:'ordered'
    	})


    	$('.btn').on('click',function(){
    		if('prev'===$(this).data("control")){//上一张
    			index=Math.max(0,--index);
    		}else{//下一张
    			index=Math.min(len-1,++index);
    		}
    		document.title=(index+1)+'/'+len;
    		$('#img').attr('src',imgs[index]);
    	});
    </script>
</body>

</html>
